<template>
  <div class="example">
    <h1>Vue TypeEffect Example</h1>
    <TypeEffect 
      :text="text" 
      :speed="30" 
      :showCursor="true"
      @typing-done="onTypingDone"
    />
    <button @click="changeText">Change Text</button>
  </div>
</template>

<script>
import { TypeEffect } from '../src/vue';

export default {
  components: {
    TypeEffect
  },
  data() {
    return {
      text: 'Hello, this is a typing effect like ChatGPT!'
    };
  },
  methods: {
    onTypingDone() {
      console.log('Typing completed!');
    },
    changeText() {
      this.text = 'This is a new text to demonstrate the typing effect again.';
    }
  }
};
</script>